import React, { useState } from 'react';
import { Card, Typography, Row, Col, Button, message } from 'antd';
import { FolderOpenOutlined, FileTextOutlined, DownloadOutlined, DeleteOutlined, UploadOutlined } from '@ant-design/icons';

const { Title, Text, Paragraph } = Typography;

const FolderHandler: React.FC = () => {
  const [selectedFolder, setSelectedFolder] = useState<string>('');

  const handleSelectFolder = async () => {
    try {
      // 在Tauri环境中，我们会调用Rust后端来选择文件夹
      // 这里先显示一个提示，实际实现将在后端API完成后更新
      message.info('将打开文件夹选择对话框（需要后端支持）');
      // 模拟选择了一个文件夹
      setSelectedFolder('D:\\示例文件夹');
    } catch (error) {
      console.error('选择文件夹失败:', error);
      message.error('选择文件夹失败，请重试');
    }
  };

  // 触发导航到文件夹清理工具
  const navigateToCleanup = () => {
    const event = new CustomEvent('navigate', { detail: 'folder-cleanup' });
    window.dispatchEvent(event);
  };

  return (
    <div style={{ padding: 16 }}>
      <Title level={2}>文件夹处理工具</Title>
      <Paragraph>欢迎使用文件夹处理功能，这里提供了各种文件和文件夹管理工具。</Paragraph>

      <Card style={{ marginBottom: 16 }}>
        <div style={{ marginBottom: 16 }}>
          <Title level={4}>当前选择的文件夹</Title>
          <Text type="secondary">
            {selectedFolder || '未选择文件夹'}
          </Text>
        </div>
        <Button 
          type="primary" 
          icon={<FolderOpenOutlined />} 
          onClick={handleSelectFolder}
          style={{ marginRight: 8 }}
        >
          选择文件夹
        </Button>
      </Card>

      <Row gutter={[16, 16]}>
        <Col span={8}>
          <Card 
            title="文件夹清理" 
            hoverable 
            onClick={navigateToCleanup}
            style={{ cursor: 'pointer' }}
          >
            <DeleteOutlined style={{ fontSize: '2rem', color: '#ff4d4f' }} />
            <Title level={5}>清理临时文件</Title>
            <Paragraph type="secondary">扫描并删除指定文件夹中的.bak等临时文件</Paragraph>
          </Card>
        </Col>

        <Col span={8}>
          <Card title="文件预览" hoverable>
            <FileTextOutlined style={{ fontSize: '2rem', color: '#1890ff' }} />
            <Title level={5}>批量预览文件</Title>
            <Paragraph type="secondary">预览文件夹中的图片、文档等文件内容</Paragraph>
          </Card>
        </Col>

        <Col span={8}>
          <Card title="文件导出" hoverable>
            <DownloadOutlined style={{ fontSize: '2rem', color: '#52c41a' }} />
            <Title level={5}>批量导出文件</Title>
            <Paragraph type="secondary">将文件从一个位置批量导出到指定目标</Paragraph>
          </Card>
        </Col>

        <Col span={8}>
          <Card title="文件上传" hoverable>
            <UploadOutlined style={{ fontSize: '2rem', color: '#fa8c16' }} />
            <Title level={5}>批量上传文件</Title>
            <Paragraph type="secondary">将本地文件批量上传到指定位置</Paragraph>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default FolderHandler;